<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户详情</title>
    <link rel="stylesheet" href="/gzht/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/gzht/lib/Hui-iconfont/1.0.8/iconfont.min.css" media="all">
    <%--    <link rel="stylesheet" href="/gzht/lib/cropper/cropper.min.css" media="all">--%>
    <style type="text/css">
        .person_info{
            width: 100%;
            margin-top: 1rem;
            color: #676A6C;
        }
        .person_info li{
            width: 100%;
            height: 1.5rem;
            line-height: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    </style>
</head>
<body style="background-color: #F2F2F2;">

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">个人资料</div>
                <div class="layui-card-body" style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start;">
                    <div class="admin_head_img" style="display: flex;flex-direction: column;align-items: center;">
                        <c:choose>
                            <c:when test="${empty admin.adminAvatarurl}">
                                <img src="/gzht/statics/img/default_user_head_img.jpg" style="width: 120px;height: 120px;border-radius: 50%;">
                            </c:when>
                            <c:otherwise>
                                <img src="${admin.adminAvatarurl.split('/gzht_imgs/head/')[1]}" style="width: 120px;height: 120px;border-radius: 50%;">
                            </c:otherwise>
                        </c:choose>
                        <a style="color: #01AAED;" id="changeHeadUrl" href="javascript:void(0);">修改头像</a>
                    </div>
                    <ul class="person_info">
                        <hr style="width: 100%;">
                        <li><span><i class="Hui-iconfont">&#xe62c;</i>&nbsp;登录名称:</span><span>${admin.adminLoginName}</span></li>
                        <hr style="width: 100%;">
                        <li><span><i class="Hui-iconfont">&#xe6c7;</i>&nbsp;手机号码:</span><span>${admin.adminPhone}</span></li>
                        <hr style="width: 100%;">
                        <li><span><i class="Hui-iconfont">&#xe611;</i>&nbsp;所属部门:</span><span>${admin.department.departmentName}</span></li>
                        <hr style="width: 100%;">
                        <li><span><i class="Hui-iconfont">&#xe68a;</i>&nbsp;邮箱地址:</span><span>${admin.adminEmail}</span></li>
                        <hr style="width: 100%;">
                        <li><span><i class="Hui-iconfont">&#xe728;</i>&nbsp;创建时间:</span><span>${admin.adminCreateTime}</span></li>
                        <hr style="width: 100%;">
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">基本资料</div>
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本资料</li>
                            <li>修改密码</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <form class="layui-form" action="">
                                    <input type="hidden" name="adminNo" value="${admin.adminNo}">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名称：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="adminName" lay-verify="title" value="${admin.adminName}" autocomplete="off" placeholder="请输入用户名称" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号码：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="adminPhone" lay-verify="title" value="${admin.adminPhone}" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="adminEmail" lay-verify="title" value="${admin.adminEmail}" autocomplete="off" placeholder="请输入用户邮箱" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">性别：</label>
                                        <div class="layui-input-block">
                                            <c:if test="${'male'.equals(admin.adminSex)}">
                                                <input type="radio" name="adminSex" value="male" title="男" checked>
                                                <input type="radio" name="adminSex" value="female" title="女">
                                            </c:if>
                                            <c:if test="${'female'.equals(admin.adminSex)}">
                                                <input type="radio" name="adminSex" value="male" title="男">
                                                <input type="radio" name="adminSex" value="female" title="女" checked>
                                            </c:if>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button lay-submit type="button" class="layui-btn layui-btn-success layui-btn-sm" lay-filter="saveMyInfo">保存内容</button>
                                            <button type="button" class="layui-btn layui-btn-warm layui-btn-sm">取消编辑</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                            <div class="layui-tab-item">
                                <form class="layui-form" action="">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">旧密码：</label>
                                        <div class="layui-input-block">
                                            <input type="text" lay-verify="oldPwd" name="oldPwd" lay-verify="title" autocomplete="off" placeholder="请输入旧密码" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">新密码：</label>
                                        <div class="layui-input-block">
                                            <input type="password" id="newPwd" lay-verify="newPwd" name="newPwd" lay-verify="title" autocomplete="off" placeholder="请输入新密码" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">确认密码：</label>
                                        <div class="layui-input-block">
                                            <input type="password" lay-verify="confirmPwd" name="confirmPwd" lay-verify="title" autocomplete="off" placeholder="请确认新密码" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" lay-submit class="layui-btn layui-btn-danger layui-btn-sm" lay-filter="changePwd">确认修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fileForm" style="display: none;width: 400px;text-align: center; margin: 1rem auto;">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="chooseFile">选择图片</button>
        <button type="button" class="layui-btn" id="submitFile">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" width="200px" height="200px" id="preview">
            <p id="resultInfo"></p>
        </div>
    </div>
</div>

<script src="/gzht/statics/js/jquery-1.12.2.min.js"></script>
<script src="/gzht/lib/layui/layui.js"></script>
<%--<script src="/gzht/lib/cropper/cropper.min.js"></script>--%>
<script>
    $(function () {
        var openIndex;
        layui.use(['element', 'form'], function(){
            var element = layui.element
                ,layer = layui.layer
                ,form = layui.form;
            form.on('submit(saveMyInfo)', function(data){
                console.log(data.field)
                $.ajax({
                    url: '/gzht/api/updateAdminBaseInfo',
                    data: JSON.stringify(data.field),
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if(res.code == 1001){
                            layer.msg('更新成功', {
                                icon: 1,
                                time: 600 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                window.location.reload();
                            });
                        }else {
                            layer.msg(res.desc)
                        }
                    },
                    error: function (err) {
                        layer.msg("网络出粗")
                    }
                })
                return false;
            })

            form.verify({
                oldPwd: function(value, item){
                  if(value.trim() == ''){
                      return "旧密码不得为空"
                  }
                },
                newPwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
                confirmPwd: function (value, item) {
                    var newPwd = $('#newPwd').val();
                    if(newPwd != value){
                        return "新密码与确认密码不一致"
                    }
                }
            })
            form.on('submit(changePwd)', function(data){
                console.log(data.field)
                $.ajax({
                    url: '/gzht/api/updateSelfPwd',
                    data: JSON.stringify(data.field),
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if(res.code == 1001){
                            layer.msg("更新成功")
                        }else {
                            layer.msg(res.desc)
                        }
                    },
                    error: function (err) {
                        layer.msg("网络出粗")
                    }
                })
                return false;
            })
        });

        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#chooseFile'
                , auto: false
                , accept: 'images'
                , acceptMime: 'image/*'
                , size: 200
                , url: '/gzht/file/uploadHeadImg'
                ,bindAction: '#submitFile'
                , choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        $('#preview').attr('src', result);
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code != 0) {
                        return layer.msg('上传失败');
                    }else {
                        //上传成功
                        layer.close(openIndex);
                        window.top.location.reload();
                        return layer.msg('上传成功')
                    }
                }
                , error: function () {
                    var demoText = $('#resultInfo');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
        // 修改头像
        $('#changeHeadUrl').click(function () {
            openIndex = layer.open({
                type: 1,
                title: '设置头像',
                area: ['500px','400px'],
                content: $('#fileForm')
            });
        })
    })
</script>
</body>
</html>
